<template>
	<view class="content_box">
		<view class="header">
			<view class="conten_btn">
				<view class="conten_item">
					<view class="bar_item">
						<uni-icons type="checkmarkempty" color="#777"></uni-icons>符合保修条件：维修免费
					</view>
				</view>
				<view class="conten_item">
					<view class="bar_item">
						<uni-icons type="closeempty" color="#777"></uni-icons>不符合保修条件；按标准收费
					</view>
					<view class="bar_item" style="color: #007cff;" @click="showpopup=true">
						什么情况不保修？<uni-icons type="right" size="14" color="#007cff"></uni-icons>
					</view>
				</view>
			</view>
			<view class="search_card">
				<view class="left_s">
					<uni-easyinput prefixIcon="search" @keydown.enter="getGoodsClassifyList"
						placeholderStyle="font-size:28rpx;" @clear="getGoodsClassifyList" v-model="searchVo.keyword"
						:inputBorder="false" placeholder="请输入关键词直接搜索收费项">
					</uni-easyinput>
					<view class="search_btn" @click="getGoodsClassifyList">
						搜索
					</view>
				</view>
			</view>
		</view>
		<view class="bodyer" v-if="searchVo.goodsTwoTypeId">
			<view class="bodyer-left">
				<view v-for="(item,index) in typeList" :key="index"
					:class="searchVo.goodsTwoTypeId== item.id?'left-item-check':''" class="left-item"
					@click="changeBrand(item)">
					<view class="name_title">{{item.name}}</view>
				</view>
			</view>
			<view class="content_list">
				<scroll-view class="scroll-view_list" scroll-y="true">
					<view class="" style="padding-bottom: 200rpx;">
						<uni-collapse @change="changeIdsFun">
							<view v-if="classifyList.length==0"
								style="display: flex;justify-content: center;align-items: center;height: 50vh;color: #999;font-size: 24rpx;">
								<uni-icons type="search" color="#999"></uni-icons>暂无收费标准...
							</view>
							<view v-for="(itemVo,index) in classifyList" :key="index">
								<view
									style="font-weight: bold; display: flex;align-items: center;column-gap: 12rpx;padding: 24rpx 24rpx 0;font-size: 28rpx;">
									<uni-icons type="paperplane-filled" size="18" color="#007cff"></uni-icons>
									<view class="conten_name">
										{{itemVo.name}}
									</view>
								</view>
								<uni-collapse-item :name="item.id" :disabled="!item.content&&!item.customerName"
									:class="{'is_title-arrow':!item.content&&!item.customerName}"
									v-for="item in itemVo.arr" :key="item.id">
									<template #title>
										<view class="col_title" style="align-items: flex-start;">
											<view class="col_title_left">
												<!-- <uni-icons type="paperplane-filled" size="18" color="#007cff"></uni-icons> -->
												<view class="conten_name"
													:class="{'conten_name_':changeIds.includes(item.id)}">
													{{item.name}}
												</view>
											</view>
											<view class="col_title_right">
												{{item.price?item.price.toFixed(2):0}}元
											</view>
										</view>
									</template>
									<view class="col_content_box">
										<view class="col_content">
											<view class="col_content_title" :class="{is_customerName:!item.content}"
												v-if="item.customerName">
												{{item.customerName}}
											</view>
											<view class="col_content_text" v-if="item.content">{{item.content}}</view>
										</view>
									</view>
								</uni-collapse-item>
							</view>
						</uni-collapse>
					</view>
				</scroll-view>
			</view>
		</view>
			<!-- 什么情况不保修？ -->
				<common-tip @set-popup="showpopup=$event" :showpopup="showpopup"></common-tip>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	// import apiGoods from '@/util/api/goods.js'
	import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app'
	import store from '@/store/index.js'
	import apiCode from '@/util/api/code.js'
	import CommonTip from '@/components/CommonTip'
		const showpopup = ref(false)
	// 通过onLoad接收数据
	const typeId = ref('')
	onLoad((e) => {
		if (e.id) {
			typeId.value = e.id
		}
		getGoodsBrandList()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 刷新
	onPullDownRefresh(async () => {
		await getGoodsBrandList()
		uni.stopPullDownRefresh()
	})
	// 展开的ids
	const changeIds = ref([])
	const changeIdsFun = (val) => {
		changeIds.value = val
	}
	const typeList = ref([])//列表
	const classifyList = ref([])
	const searchVo = ref({
		"goodsTwoTypeId": '',
		"keyword": ""
	})
	// 获取品牌列表
	const getGoodsBrandList = async () => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		})
		await apiCode.getGoodstype().then(res => {
			if (res.code == 20000&&res.data.rows.length>0) {
				typeList.value = res.data.rows
				if (typeId.value) {
					searchVo.value.goodsTwoTypeId = typeId.value
				} else {
					searchVo.value.goodsTwoTypeId = res.data.rows[0].id
				}

				getGoodsClassifyList()
			}
		})
		uni.hideLoading()
	}
	const modules = ref([{ name: '安装费', value: 1 }, { name: '维修费', value: 2 }, { name: '检测费', value: 3 }, { name: '上门费', value: 4 }, { name: '保养费', value: 5 }])

	// 获取分类列表
	const getGoodsClassifyList = async () => {
		searchVo.value.keyword = searchVo.value.keyword.trim()
		uni.showLoading({
			title: "加载中..."
		})
		await apiCode.getUserServiceFeeInfoList(searchVo.value).then(res => {
			if (res.code == 20000) {
				classifyList.value = []
				let arr1 = res.data.rows.filter(o => o.type == 1)
				let arr2 = res.data.rows.filter(o => o.type == 2)
				let arr3 = res.data.rows.filter(o => o.type == 3)
				let arr4 = res.data.rows.filter(o => o.type == 4)
				let arr5 = res.data.rows.filter(o => o.type == 5)
				classifyList.value.push({ name: '安装费', arr: arr1 }, { name: '维修费', arr: arr2 }, { name: '检测费', arr: arr3 }, { name: '上门费', arr: arr4 }, { name: '保养费', arr: arr5 })
				classifyList.value = classifyList.value.filter(o => o.arr.length > 0)
			}
		})
		uni.hideLoading()
	}
	// 选择品牌
	const changeBrand = (val : { id : any; }) => {
		searchVo.value.keyword = ''
		typeId.value = ''
		searchVo.value.goodsTwoTypeId = val.id
		getGoodsClassifyList()
	}
</script>

<style lang="scss">
	.content_box {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;

		/* #endif */
		.header {
			box-sizing: border-box;
			padding: 10rpx 0;
			background-color: #f5f7fa;
			// position: relative;
			z-index: 99;
			width: 100%;
			// flex: 1;

			.conten_btn {
				background-color: #f2f9ff;
				margin: 24rpx;
				padding: 12rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				row-gap: 8rpx;

				.conten_item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.bar_item {
						display: flex;
						align-items: center;
						color: #777;
					}
				}
			}

			.search_card {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 24rpx;

				.left_s {
					display: flex;
					align-items: center;
					background-color: #fff;
					border-radius: 40rpx;
					height: 80rpx;
					width: 100%;

					:deep(.uni-easyinput__content) {
						height: 80rpx;
						border-radius: 40rpx 0 0 40rpx;

						&.is-focused {

							.uniui-clear,
							.uniui-eye-filled {
								color: #007cff99 !important;
							}
						}
					}

					.search_btn {
						font-size: 28rpx;
						border-left: 2rpx solid #007cff;
						color: #000;
						line-height: 40rpx;
						padding: 0 20rpx;
						height: 40rpx;
						color: #007cff;
						// border-radius: 0 40rpx 40rpx 0;

					}
				}
			}
		}

		.bodyer {
			width: 100%;
			flex: 1;
			height: calc(100% - 130px);

			.bodyer-left {
				width: 30%;
				overflow-y: auto;
				height: 100%;
				float: left;
				background: #f9f9f9;

				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: transparent;
				}

				.left-item {
					width: 100%;
					// height: 15vw;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 24rpx 24rpx 24rpx 2rpx;
					box-sizing: border-box;
					position: relative;

					.name_title {
						// color: #666;
						font-size: 28rpx;
						width: 100%;
						height: 100%;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-wrap: break-word;
						word-break: break-all;
						text-align: center;
						border-left: 6rpx solid transparent;

					}

					&:last-child {
						margin-bottom: 180rpx;
					}
				}

				.left-item-check {
					background-color: #fff;

					.name_title {
						border-left: 6rpx solid #007cff;
						color: #007cff;
					}
				}
			}

			.content_list {
				width: 70%;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 100%;
				float: left;
				flex: 1;

				.scroll-view_list {
					height: 100%;

					::-webkit-scrollbar {
						display: none;
						width: 0 !important;
						height: 0 !important;
						-webkit-appearance: none;
						background: transparent;
						color: transparent;
					}
				}

				.col_title {
					display: flex;
					justify-content: space-between;
					padding: 24rpx 0;
					font-size: 28rpx;
					align-items: center;
					column-gap: 12rpx;

					&_left {
						display: flex;
						column-gap: 12rpx;
						flex: 1;

						.conten_name {
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							word-wrap: break-word;
							word-break: break-all;
							margin-left: 30rpx;
						}

						.conten_name_ {
							-webkit-line-clamp: 4;
						}
					}

					&_right {
						color: #007cff;
						font-size: 28rpx;

					}
				}

				:deep(.uni-collapse-item__title-arrow) {
					padding: 24rpx 0;
					height: 40px !important;
				}

				.is_title-arrow {
					:deep(.uni-collapse-item__title-arrow) {
						opacity: 0;
					}
				}

				.uni-collapse-item__title {
					align-items: flex-start;
				}

				.col_content_box {
					padding: 0rpx 24rpx 24rpx;
					// padding: 0 24rpx 24rpx;
					box-sizing: border-box;

					.col_content {
						box-sizing: border-box;
						background-color: #fafafa;
						border-radius: 6rpx;

						&_title {
							background-color: #007cff;
							color: #fff;
							padding: 16rpx 20rpx;
							width: 100%;
							box-sizing: border-box;
							border-radius: 6rpx 6rpx 0 0;
						}

						.is_customerName {
							border-radius: 6rpx;
						}

						&_text {
							padding: 24rpx;
						}
					}
				}

			}

		}
	}
</style>